<template>
  <div class="main">
    <div class="head">
      <p><span>￥</span>{{remainPar}}</p>
    </div>
    <div class="content">
      <div class="contentbox">
        <h3>{{name}}</h3>
        <p class="date">有效期至:{{availableDate}}</p>
        <div class="shop">
          <p>适用门店:</p>
          <p>{{couponChannel}}</p>
        </div>
        <div class="intro">
          <p>商品简介:</p>
          <p>使用丝芙兰现金抵用券,就需要到丝芙兰网站中选购商品,并将商品添加至购物车中,进入我的过后无车页面.</p>
        </div>
      </div>
    </div>
    <!--下面开始是底部按钮-->
    <div class="button">
      <a @click="getData()">确认领取</a>
    </div>
    <!--下面是弹窗-->
    <div class="prop2" v-if="prop==2">
      <div class="propcon">
        <p>恭喜,领取成功!</p>
        <a @click="prop=0">确定</a>
      </div>
    </div>
    <div class="prop3" v-if="prop==3">
      <div class="propcon">
        <p>抱歉,领取失败!<br>本券仅限非会员领取</p>
        <a @click="prop=0">确定</a>
      </div>
    </div>
    <PulseLoader v-if="loading==true"  :size="size" :color="color"></PulseLoader>
  </div>
</template>

<script>
  import {
    baseUrl,myUrl
  } from "@/assets/public"
  import PulseLoader from 'vue-spinner/src/PulseLoader.vue';
  import wx from 'weixin-js-sdk';
  export default {
    name: 'main',
    data() {
      return {
        prop:0,
        loading:true,
        size:".5rem",
        color:"#333",
        availableDate:"",
        couponChannel:"",
        name:"",
        remainPar:"",
        shareTitle:"爱拼才美丽",
        lineLink:"",
        imgUrls:myUrl+"/static/img/share.png",
        descContent:"美颜·美体·健康",
      }
    },
    created() {
      this.lineLink =window.location.href;
    },
    mounted() {
      var encrypted = this.$route.query.encrypted;
      var that =this;
      $.ajax({
        type: 'GET',
        url: baseUrl + '/api/cptransinfo',
        data: {
          "openid":localStorage.openid,
          "encrypted":encrypted,
        },
        dataType: 'json',
        success:function (res) {
          console.log(res);
          that.availableDate=res.data.info.availableDate.substr(0,10);
          that.couponChannel=res.data.info.couponChannel;
          that.name=res.data.info.name;
          that.remainPar=res.data.info.remainPar;
          that.loading=false;
        }
      })
    },
    methods: {
      //微信分享
      wechatShare(){
        let that = this;
        wx.ready(function (){
          wx.onMenuShareTimeline({
            title: that.shareTitle, // 分享标题
            link: that.lineLink, // 分享链接
            imgUrl: that.imgUrls, // 分享图标
            success: function () {
              // 用户确认分享后执行的回调函数

            },
            cancel: function () {}
          });
          wx.onMenuShareAppMessage({
            title: that.shareTitle, // 分享标题
            desc: that.descContent, // 分享描述
            link: that.lineLink, // 分享链接
            imgUrl: that.imgUrls, // 分享图标
            type: 'link', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {

            },
            cancel: function () {}
          });
          wx.onMenuShareQQ({
            title: that.shareTitle, // 分享标题
            desc: that.descContent, // 分享描述
            link: that.lineLink, // 分享链接
            imgUrl: that.imgUrls, // 分享图标
            success: function () {
              // 用户确认分享后执行的回调函数

            },
            cancel: function () {}
          });
          wx.onMenuShareWeibo({
            title: that.shareTitle, // 分享标题
            desc: that.descContent, // 分享描述
            link: that.lineLink, // 分享链接
            imgUrl: that.imgUrls, // 分享图标
            success: function () {
              // 用户取消分享后执行的回调函数

            },
            cancel: function () {}
          });
          wx.onMenuShareQZone({
            title: that.shareTitle, // 分享标题
            desc: that.descContent, // 分享描述
            link: that.lineLink, // 分享链接
            imgUrl: that.imgUrls, // 分享图标
            success: function () {
              // 用户取消分享后执行的回调函数

            },
            cancel: function () {}
          });
        })
      },
      //领取转赠券-接口
      getData(){
        var that =this;
        $.ajax({
          url:baseUrl+"/api/cptrans",
          type:"POST",
          dataType:"json",
          data:{
            "openid":localStorage.openid,
            "encrypted":encrypted,
          },
          success:function (res) {
            console.log(res);
            if(res.status==200){
                that.prop=2;
            }else {
                that.prop=3;
            }
          }
        })
      }
    },
    components: {
      PulseLoader,
    }
  }
</script>

<style scoped>
  .main {
    min-height:100vh;
    background: url("../../img/bg1.png") center center repeat;
    overflow: hidden;
  }
  .head {
    width: 100%;
    height: 2.6rem;
    background: url("../../img/diyong-2.png") center center no-repeat;
    background-size:cover;
    margin-top:.5rem;
    position: relative;
    z-index:10;
  }
  @font-face {
    font-family: "pis";
    src: url("../../css/BanksScript.otf");
  }
  .head p {
    width: 100%;
    height: 2.6rem;
    line-height:2.6rem;
    text-align: center;
    font-family:pis;
    color:#666;
    font-size: 1.5rem;
  }
  .head p span {
    font-style: italic;
    font-size:.6rem;
  }
  .content {
    width: 90%;
    height:auto;
    border:1px solid #000;
    margin:0 auto;
    padding:.2rem;
    box-shadow: .5px .5rem 2rem rgba(227,224,221,1) inset;
    margin-top:-.75rem;
  }
  .content .contentbox {
    width: 100%;
    height:auto;
    padding-bottom:1rem;
  }
  .content h3 {
    width: 94%;
    height:1rem;
    line-height:1rem;
    margin:0 3%;
    border-bottom:1px solid #dddddd;
    text-align: center;
    font-size:.46rem;
    font-weight:normal;
    margin-top:1rem;
  }
  .content p.date {
    width: 94%;
    height:1.4rem;
    line-height:1.4rem;
    margin:0 3%;
    border-bottom:1px solid #dddddd;
    text-align: center;
    font-size:.4rem;
  }
  .content .shop,.content .intro {
    width: 94%;
    margin:0 3%;
    font-size:.4rem;
    line-height:.6rem;
    color: #666666;
    margin-top:.5rem;
    display: flex;
    justify-content: flex-start;
  }
  .content .shop p:first-child {
    width: 25%;
  }
  .content .shop p:last-child {
    width: 70%;
  }
  .content .intro p:first-child {
    width: 25%;
  }
  .content .intro p:last-child {
    width: 70%;
  }


  .button {
    width: 100%;
    height:auto;
  }
  .button a {
    display: flex;
    justify-content: center;
    align-items:center;
    margin:0 auto;
    width: 50%;
    height:1.2rem;
    margin-top:.5rem;
    font-size:.4rem;
  }
  .button a:first-child {
    background: #fff6de;
  }
  .button a:first-child img {
    margin-right:.2rem;
  }
  .button a:first-child p {
    color: #666666;
  }
  .button a:last-child {
    background: linear-gradient(50deg,#666666,#fff5dd);
    color: #fff;
  }


  .button1 a {
    display: flex;
    justify-content: center;
    align-items:center;
    margin:0 auto;
    width: 50%;
    height:1.2rem;
    margin-top:1rem;
    font-size:.4rem;
    background: #cacaca;
    color: #fff;
  }
  .button2 a {
    display: flex;
    justify-content: center;
    align-items:center;
    margin:0 auto;
    width: 50%;
    height:1.2rem;
    margin-top:1rem;
    font-size:.4rem;
    background: #cacaca;
    color: #fff;
  }

  .prop1 {
    width: 100%;
    height:100vh;
    background: rgba(76,76,76,.7);
    position: fixed;
    top:0;
    left:0;
    z-index:9999999;
  }
  .prop1 .propcon {
    width: 90%;
    height:10rem;
    margin:0 auto;
    margin-top:1rem;
    background: url("../../img/prop1.png") 1.5rem center no-repeat;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /*align-items: center;*/
    overflow: hidden;
  }
  .prop1 .propcon p {
    width: 100%;
    height:auto;
    text-align: center;
    font-size:.32rem;
    line-height:.5rem;
    color: #333333;
    margin-top:5.2rem;
  }
  .prop1 .propcon a {
    display: block;
    width: 2.4rem;
    height:1rem;
    line-height:1rem;
    text-align: center;
    font-size:.4rem;
    border:1px solid #333333;
    margin:0 auto;
  }

  .prop2 {
    width: 100%;
    height:100vh;
    background: rgba(76,76,76,.7);
    position: fixed;
    top:0;
    left:0;
    z-index:9999999;
  }
  .prop2 .propcon {
    width: 90%;
    height:10rem;
    margin:0 auto;
    margin-top:1rem;
    background: url("../../img/prop2.png") 1.5rem center no-repeat;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .prop2 .propcon p {
    width: 100%;
    height:auto;
    text-align: center;
    font-size:.32rem;
    line-height:.5rem;
    color: #333333;
    margin-top:5.2rem;
  }
  .prop2 .propcon a {
    display: block;
    width: 2.4rem;
    height:1rem;
    line-height:1rem;
    text-align: center;
    font-size:.4rem;
    border:1px solid #333333;
    margin:0 auto;
  }


  .prop3 {
    width: 100%;
    height:100vh;
    background: rgba(76,76,76,.7);
    position: fixed;
    top:0;
    left:0;
    z-index:9999999;
  }
  .prop3 .propcon {
    width: 90%;
    height:10rem;
    margin:0 auto;
    margin-top:1rem;
    background: url("../../img/prop3.png") 1.5rem center no-repeat;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .prop3 .propcon p {
    width: 100%;
    height:auto;
    text-align: center;
    font-size:.32rem;
    line-height:.5rem;
    color: #333333;
    margin-top:4.8rem;
  }
  .prop3 .propcon a {
    display: block;
    width: 2.4rem;
    height:1rem;
    line-height:1rem;
    text-align: center;
    font-size:.4rem;
    border:1px solid #333333;
    margin:0 auto;
  }



  .prop4 {
    width: 100%;
    height:100vh;
    background: rgba(76,76,76,.7);
    position: fixed;
    top:0;
    left:0;
    z-index:9999999;
  }
  .prop4 .propcon {
    width: 90%;
    height:10rem;
    margin:0 auto;
    margin-top:1rem;
    background: url("../../img/prop4.png") 1.5rem center no-repeat;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .prop4.propcon p {
    width: 100%;
    height:auto;
    text-align: center;
    font-size:.32rem;
    line-height:.5rem;
    color: #333333;
    margin-top:5.2rem;
  }
  .prop4 .propcon a {
    display: block;
    width: .8rem;
    height:.8rem;
    line-height:.8rem;
    text-align: center;
    font-size:1rem;
    border:1px solid #333333;
    margin:0 auto;
    margin-top: 7rem;
    transform: rotate(45deg);
  }
  .v-spinner {
    position: fixed;
    top:0;
    width: 100%;
    height: 100vh;
    z-index: 100;
    background: #fff;
    display: flex;
    flex: 0 1 auto;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
  }
</style>
